<!--  -->
<template>
  <div>
    <cu-custom
      :bgImage="bgImage"
      :needBack="true"
      bgColor="bgNormal"
      topTitle="消息通知"
      titleClass="commTitleWhite"
      backIconColor="#fff"
    ></cu-custom>
    <u-tabs
      :list="list"
      :is-scroll="false"
      :current="current"
      @change="change"
    ></u-tabs>
    <view class="content">
      <scroll-view
        class="scroll_content"
        scroll-y
        :style="{ height: scorllContentHeight }"
        v-if="noticeList.length > 0"
        @scrolltolower="loadMore"
      >
        <view class="notice_list_container">
          <view
            class="notice_list"
            v-for="(item, index) in noticeList"
            :key="index"
            @click="toDeatil(item)"
          >
            <view class="">
              <view class="">
                {{ item.title }}
              </view>
              <view class=""> 发布时间：{{ item.createTime }} </view>
            </view>
            <view
              v-if="item.isRead == 0"
              class=""
              style="
                width: 16rpx;
                height: 16rpx;
                background: #f20000;
                border-radius: 50%;
                margin-right: 42rpx;
              "
            >
            </view>
          </view>
        </view>
        <u-loadmore :status="status" :load-text="loadText"></u-loadmore>
      </scroll-view>
			<u-empty v-else text="暂无数据~"></u-empty>
    </view>
  </div>
</template>

<script>
import { getMessageList, getNoReadMessageList } from "@/api/workBench";
export default {
  data() {
    return {
      scorllContentHeight: "", // 页面滚动高度
      noticeList: [],
      form: {
        size: 10,
        current: 1,
        isRead: 0,
      },
      total: 0,
      loadText: {
        loadmore: "加载更多",
        loading: "加载中",
        nomore: "没有更多了",
      },
      status: "loadmore",
      showNoRead: "",
      list: [
        // {
        //   name: "全部",
        // },
        {
          name: "未读",
        },
        {
          name: "已读",
        },
      ],
      current: 0,
    };
  },
  onLoad(options) {
    // console.log(options)
    this.showNoRead = options.showNoRead;
    if (this.showNoRead) {
      this.current = 0;
      this.form.isRead = 0;
    }
  },
  onShow() {
    this.getHeight();
    this.getList();
  },
  methods: {
    // 动态计算滚动高度
    getHeight() {
      this.scorllContentHeight = `calc(100vh - ${this.CustomBar}px - 24rpx - 20rpx - 88rpx)`;
    },
    getList() {
      getMessageList(this.form).then((res) => {
        if (res.code == 200) {
          this.total = res.data.total;
          // console.log("res===", res);
          if (res.data.total > 10) {
            this.noticeList = this.noticeList.concat(res.data.records); //合并数组
          } else {
            this.noticeList = res.data.records;
            this.status = "nomore";
          }
          console.log(this.noticeList);
        }
      });
    },
    // 加载更多
    loadMore() {
      console.log("到底了");
      if (this.total > this.form.current * this.form.size) {
        this.status = "loading";
        this.form.current++;
        this.getList();
      } else {
        this.status = "nomore";
      }
    },
    // 详情
    toDeatil(data) {
      uni.navigateTo({
        url: `./detail?id=${JSON.stringify(data.id)}`,
      });
    },
    change(index) {
      this.noticeList = [];
      this.current = index;
      if (this.current == 0) {
        this.form.isRead = 0;
      } else if (this.current == 1) {
        this.form.isRead = 1;
      }
      this.getList();
    },
  },
  components: {},
};
</script>
<style lang="scss" scoped>
.content {
  margin-top: 24rpx;

  background: #f2f2f2;
  .scroll_content {
    .notice_list_container {
      padding: 0 30rpx;
      .notice_list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 41rpx 0 45rpx 40rpx;
        background: #fff;
        border-radius: 8rpx;
        &:nth-child(n + 2) {
          margin-top: 17rpx;
        }
        &:last-child {
          margin-bottom: 10rpx;
        }
        view:first-child {
          font-size: 28rpx;
          color: #333;
        }
        view:last-child {
          font-size: 24rpx;
          color: #999;
          margin-top: 25rpx;
        }
      }
    }
  }
}
::v-deep {
  .u-load-more-wrap {
    margin: 10rpx 0 !important;
  }
}
</style>
